<script setup>
import { ref } from 'vue'
import { getImageByName } from '@/utils/getImage.js'

const baseUrl = import.meta.url

const title = ref('监控设备统计')

const list = ref([
    {
        name: '监视器总数',
        num: 9,
        icon: 'cam1',
        class: 'total'
    },
    {
        name: '运行摄像头',
        num: 9,
        icon: 'cam2',
        class: 'runing'
    },
    {
        name: '正常摄像头',
        num: 9,
        icon: 'cam3',
        class: 'normal'
    },
    {
        name: '异常摄像头',
        num: 0,
        icon: 'cam4',
        class: 'error'
    }
])
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>{{ title }}</h1>
        </div>
        <div class="com-block-content block">
            <div class="item" v-for="(item, index) in list" :key="index" :class="item.class">
                <img :src="getImageByName(`${item.icon}`, baseUrl)" alt="" />
                <div class="describe">
                    <span>{{ item.name }}</span>
                    <strong class="number">{{ item.num }}</strong>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.block {
    padding: 15px 5px 5px 5px;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .item {
        width: 205px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        img {
            width: 48px;
            height: 48px;
        }
        .describe {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            span {
                font-size: 14px;
            }
            .number {
                font-size: 22px;
            }
        }
    }

    .total,
    .runing {
        background: url(./assets/img/jk1.png) no-repeat;
        background-size: 100% 100%;
    }
    .normal {
        background: url(./assets/img/jk2.png) no-repeat;
        background-size: 100% 100%;
        .describe {
            strong,
            span {
                color: #27fcaa;
            }
        }
    }
    .error {
        background: url(./assets/img/jk3.png) no-repeat;
        background-size: 100% 100%;
        .describe {
            strong,
            span {
                color: #ff5252;
            }
        }
    }
}
</style>
